/**
author: sailing
date: 2016/11/21
****/
<style lang='less'>
.toolbar {
  position: absolute;
  margin-left:5px;
  transition:left 1s ease 0s;
  height:40px;
  margin-top:5px;
  z-index:10000;
  line-height:40px;
  .liList{
    .liHeight{
      display:flex;
      margin-right:5px;
    }
  }
}
</style>

<template>
  <div class='toolbar' v-bind:style="{left: left + 'px'}">
    <ul class='liList'>
      <li class='liHeight'>
        <div @click='clickLeft' style="display:inline-block;width:35px;height:35px;text-align:center">
          <i v-show='flag' class="el-icon-arrow-left"></i>
          <i v-show='!flag' class="el-icon-arrow-right"></i>
        </div>
        <el-button @click='clickBnt' type="primary" size="small">连线</el-button>
        <el-button @click='shortPath' type="primary" size="small">最短路径</el-button>
        <el-button @click='clearSelect' type="primary" size="small">清空选择</el-button>
        <el-button @click='changeIpLabel' type="primary" size="small">名称/IP</el-button>
      </li>
    </ul>
    
  </div>
</template>
<script>
import Vue from 'vue'
import eventBus from '../eventBus'
export default {
  data () {
    return {
      left: 180,
      input5: '1',
      flag: true,
      listText: [{
        src: '../static/assets/icon/server.png',
        text: '关联服务器7台'
      }, {
        src: '../static/assets/icon/storage.png',
        text: '关联存储设备0台'
      }, {
        src: '../static/assets/icon/switch.png',
        text: '关联交换机设备'
      }, {
        src: '../static/assets/icon/router.png',
        text: '关联网络设备'
      }, {
        src: '../static/assets/icon/safety.png',
        text: '关联安全设备'
      }]
    }
  },
  methods: {
    clickBnt () {
      eventBus.bus.$emit('getPortData')
    },
    shortPath () {
      eventBus.bus.$emit('shortPath')
    },
    clearSelect () {
      eventBus.bus.$emit('clearSelect')
    },
    changeIpLabel () {
      eventBus.bus.$emit('displayLabelIp')
    },
    clickLeft () {
      this.flag ? this.flag = false : this.flag = true
      this.flag ? this.left = 180 : this.left = 0
      eventBus.bus.$emit('leftClose', {flag: this.flag})
    }
  }
}
</script>
